<script setup>
import ElCardBg from '@/components/ElCardBg.vue';
import { ref, onMounted } from 'vue'
import { getWebsite, updateWebsite } from '@/api/website.js'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus';
const userStore = useUserStore()
const headers = ref({ 'Authorization': userStore.userInfo.token })
// 获取网站信息
const getWebsiteData = async () => {
  const res = await getWebsite()
  form.value = res.data
}
const action = (type) => {
  return `/prod-api/admin/website/fileUpload/${type}`
}
onMounted(() => {
  getWebsiteData()
})
const form = ref({
  avatar: '',
  background: '',
  signature: '',
  footerSignature: ''
})
const onUpdate = async () => {
  await updateWebsite(form.value)
  getWebsiteData()
  ElMessage.success("修改成功")
}
const onRest = () => {
  getWebsiteData()
  ElMessage.success("重置成功")
}
const handleAvatarSuccess = (response) => {
  form.value.avatar = response.data
  ElMessage.success("上传成功")
}
const handleBgSuccess = (response) => {
  form.value.background = response.data
  ElMessage.success("上传成功")
}
</script>

<template>
  <ElCardBg :title="'网站信息'">
    <template v-slot:content>
      <div class="div-form" style="margin-left: 18px">
        <el-form-item label="个人头像:">
          <el-upload :headers="headers"
            style=" height: 120px;width: 120px;border: 1px solid #409eff;border-radius: 50%;"
            :on-success="handleAvatarSuccess" :action="action(1)" :show-file-list="false">
            <!-- 文件上传接口 -->
            <el-avatar v-if="form.avatar" :size="120" style="border-radius: 10px;" :src="form.avatar"></el-avatar>
            <el-button v-else
              style="background-color: #ffffff;border: none;margin:52px 0px 0px 45px;font-size: 20px;width: 15px;height: 15px;"><span
                style="color: #8597b4;">+</span></el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="个人背景:">
          <el-upload :headers="headers"
            style=" height: 220px;width: 220px;border-radius: 10px;border: 1px solid #409eff;"
            :on-success="handleBgSuccess" :action="action(2)" :show-file-list="false">
            <!-- 文件上传接口 -->
            <el-avatar v-if="form.background" :size="220" style="border-radius: 10px;" shape="suqare"
              :src="form.background"></el-avatar>
            <el-button v-else
              style="background-color: #ffffff;border: none;margin:100px 0px 0px 93px;font-size: 40px;width: 15px;height: 15px;"><span
                style="color: #8597b4;">+</span></el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="个性签名:">
          <el-input placeholder="" style="width: 400px;" v-model="form.signature"></el-input>
        </el-form-item>
        <el-form-item label="底部签名:">
          <el-input placeholder="" type="textarea" :rows="4" style="width: 400px;"
            v-model="form.footerSignature"></el-input>
        </el-form-item>
        <el-form-item label="" label-width="340px" style="margin-top: 15px;">
          <el-button type="primary" plain @click="onUpdate" v-permissionDirective>修改</el-button>
          <el-button type="warning" plain @click="onRest">重置</el-button>
        </el-form-item>
      </div>
    </template>
  </ElCardBg>
</template>

<style lang="scss" scoped></style>